<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p>创建项目</p>
                        <p>创建一个令人愉快的项目</p>
                    </div>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <div style="padding: 0 32px">
                <div class="my-step">
                    <div :class="{'step-active': current >= 0}">
                        <div>
                            <div class="step-no">1</div>
                        </div>
                        <div class="step-content">基础信息、数据库</div>
                    </div>
                    <div :class="{'step-active': current >= 1}">
                        <div class="step-line"></div>
                        <div>
                            <div class="step-no">2</div>
                        </div>
                        <div class="step-content">配置</div>
                    </div>
                    <div :class="{'step-active': current >= 2}">
                        <div class="step-line"></div>
                        <div>
                            <div class="step-no">3</div>
                        </div>
                        <div class="step-content">API管理</div>
                    </div>
                </div>
                <base-info v-show="current === 0" ref="baseInfo"></base-info>
                <config v-show="current === 1" ref="config"></config>
                <api-mag v-show="current === 2" ref="apiMag"></api-mag>
                <div class="step-btn">
                    <Button type="primary" v-if="current > 0" @click="previousStep">上一步</Button>
                    <Button type="primary" @click="nextStep">下一步</Button>
                    <Button @click="cancel">取消</Button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ContentHead from './contentHead';
    import BaseInfo from './step/baseInfo';
    import Config from './step/config';
    import ApiMag from './step/apiMag';
    export default {
        data(){
          return {
              current: 0
          };
        },
        components:{
            ContentHead,
            BaseInfo,
            Config,
            ApiMag
        },
        methods:{
            cancel(){
              this.$router.push('/main/project');
            },
            previousStep(){
                this.current --;
            },
            nextStep(){
                if (this.current === 0) {
                    this.$refs['baseInfo'].valData().then((res)=>{
                        if (res) {
                            this.current ++;
                        }
                    });
                } else if (this.current === 1) {
                    if (this.$refs['config'].valData()) {
                        this.current ++;
                        this.$refs['apiMag'].initPorject(this.$refs['baseInfo'].getData());
                    }
                } else if (this.current === 2) {
                    if (this.$refs['apiMag'].valData()) {
                        let project = Object.assign({}, this.$refs['baseInfo'].getData(), this.$refs['config'].getData(), this.$refs['apiMag'].getData());
                        project.components =  Object.values(project.componentsMap).toString().replace('[').replace(']');
                        this.$http.post('/codegen/api/v1/project/save/sync', project).then((res)=>{
                            if (res.status === 200) {
                                this.$Message.success('生成项目成功！');
                                this.$router.push('/main/project');
                            }
                        });
                    }
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    .project-content {
        width: 1024px;
        margin: 18px auto;
        background-color: #fff;
        padding: 16px;

        .my-step{
            display: flex;
            margin: 0 -164px 36px 30px;
            &>div{
                display: flex;
                align-items: center;
                width: calc(50% - 18px);
                position: relative;

                &>div{
                    width: 200px;
                }

                .step-content{
                    position: absolute;
                    width: 200px;
                    text-align: center;
                    top: 42px;
                    right: 82px;
                    color: #e1e1e1;
                }
            }
            &>div:first-child{
                width: auto;
            }

            .step-line{
                width: calc(100% - 36px);
                height: 3px;
                vertical-align: middle;
                background-color: #e1e1e1;
                margin-left: -164px;
            }

            .step-active{
                .step-no{
                    border-color: #2d8cf0;
                    color: #2d8cf0
                }
                .step-line{
                    background-color: #2d8cf0;
                }
                .step-content{
                    color: #2d8cf0
                }
            }

            .step-no{
                font-size: 16px;
                width: 36px;
                height: 36px;
                border: 5px solid #e1e1e1;
                border-radius: 50%;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                font-weight: 800;
                color: #e1e1e1;
            }
        }

        .step-btn{
            text-align: center;
            button{
                margin:0 4px;
            }
        }
    }
</style>